<template>
  <div class="card">
    <div style="margin-bottom: 10px">
      <a-input placeholder="用户姓名" :allowClear="true" v-model="form.name" class="inputStyle"></a-input>
      <a-input placeholder="用户手机" :allowClear="true" v-model="form.phone" class="inputStyle"></a-input>
      <a-button @click="addUserNotice" type="primary">新增</a-button>
      <a-button @click="query" type="primary">查询</a-button>
      <a-button @click="reset">重置</a-button>
    </div>
    <a-table
      :row-selection="rowSelection"
      :pagination="false"
      :rowKey="(record, index) => index"
      :loading="loading"
      style="border: 1px solid #e8e8e8"
      :columns="columns"
      :data-source="data"
    >
      <div slot="status" slot-scope="text, record">
        <span
          :style="`border: 1px solid ${
            record.is_read ? '#bded9f' : '#91d5ff'
          }; padding: 0 5px; font-size: 14px; color: ${record.is_read ? '#56c621' : '#1890ff'}; background-color: ${
            record.is_read ? '#f6ffed' : '#e6f7ff'
          }`"
          >{{ record.is_read ? '已读' : '未读' }}</span
        >
      </div>
      <div slot="content" slot-scope="text, record">
        <span v-html="record.content"></span>
      </div>
      <div slot="operate" slot-scope="text, record">
        <span class="linkStyle" @click="del(record.id)">删除</span>
      </div>
    </a-table>
    <div class="paging">
      <a-pagination
        @change="changepage"
        @showSizeChange="showSizeChange"
        size="small"
        :total="total"
        :page-size="form.page_size"
        :pageSizeOptions="['10', '20', '30', '40', '50']"
        :show-total="total => `共 ${total} 条`"
        show-size-changer
        show-quick-jumper
      />
    </div>
    <AddUse :isShowAdd.sync="isShowAdd" @upload="getCardList" />
  </div>
</template>

<script>
import { getUserNotifyAPI, deletInfoAPI } from '@/api/transaction.js'
import AddUse from './dialog/AddUser.vue'
export default {
  name: 'BankCard',
  components: {
    AddUse
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  data() {
    return {
      object: {},
      isShowAdd: false,
      total: null,
      loading: false,
      selectedRowKeys: [],
      select_rows: [],
      form: {
        page: 1,
        page_size: 50,
        name: '',
        phone: ''
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '用户姓名',
          dataIndex: 'user.realname',
          align: 'center'
        },
        {
          title: '用户手机',
          dataIndex: 'user.phone',
          align: 'center'
        },
        {
          title: '通知内容',
          dataIndex: 'content',
          align: 'center',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: '通知标题',
          dataIndex: 'title',
          align: 'center'
        },

        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      data: []
    }
  },
  created() {
    this.getCardList()
  },
  methods: {
    del(id) {
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          try {
            await deletInfoAPI({ id })
            this.getCardList()
            this.$message.success('操作成功')
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    query() {
      this.form.page = 1
      this.getCardList()
    },
    async addUserNotice() {
      this.isShowAdd = true
    },
    changepage(value) {
      this.form.page = value
      this.getCardList()
    },
    showSizeChange(value, val) {
      this.form.page_size = val
      this.getCardList()
    },
    reset() {
      this.form = {
        page: 1,
        page_size: 50,
        name: '',
        phone: ''
      }
      this.getCardList()
    },
    async getCardList() {
      try {
        this.loading = true
        const { data } = await getUserNotifyAPI(this.form)
        console.log(data)
        this.data = data.data
        this.total = data.total
        this.selectedRowKeys = []
        this.select_rows = []
      } finally {
        this.loading = false
      }
    },
    showAdd() {
      this.isShowAdd = true
    },
    edit(object) {
      this.object = object
      this.isShowAdd = true
    }
  }
}
</script>

<style lang="less" scoped>
.inputStyle {
  width: 180px;
  margin-right: 10px;
}
.btnStyle {
  margin-right: 10px;
}

/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 15px;
}

/* 整个滚动条 */
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
</style>
